﻿<template>
  <div class="up_load_act_wrapper">

    <!-- file 输入 s-->
    <input type="file" name="name" value="" ref="file" style="display:none;"/>
    <!-- file 输入 e-->
    <!-- file 输入 下边s -->
    <input type="file" name="name" value="" ref="file_zw" style="display:none"/>
    <!-- file 输入 下边e -->
     <div class="up_Load_header">
      <img src="../../static/img/back_ccc.png" class="gobakc_img" v-on:click="header_back"> 编辑参赛资料
     </div>
     <div class="up_Load_img" v-on:click.self="add_img_f">

        <!-- img_show_b s -->
       <div class="del_x" v-on:click.self="del_x" v-show="!hide_show_b">
         x
       </div>

        <img  v-bind:src="show_b_img_data" alt="Alternate Text"
              class="img_show_b" v-show="!hide_show_b"/>
        <!-- img_show_b e -->

        <div class="mid_box_w" v-show="hide_show_b"  v-on:click="add_img_f">
          <p>卡牌的封面图片</p>
          <p>要求比卡牌上的图片框大</p>
        </div>

     </div>
    <!-- 介绍s -->
    <div class="warp_jies">
      <textarea class="jies" placeholder="输入简介" ref="jianjie">

    </textarea>
    </div>

    <!-- 介绍e -->

    <!-- title s -->
    <div class="title_s">
          添加正文
    </div>


    <!--<div class="title clearfix" style="display:flex">
      <div class="add_voice" v-show="add_s" v-on:click="get_voice">
        添加语言
      </div>
      <div class="add_voice" style="background-color:#2aa549" v-show="play_data" v-on:click="play_music">
        播放语言
      </div>
      <div class="add_voice" style="background-color:#2aa549" v-show="pause_data" v-on:click="play_pause">
        语言暂停
      </div>
      <div class="add_voice" style="background-color:#ff0000" v-show="del_data" v-on:click="del_voice">
        删除语音
      </div>

    </div>-->

    <!--<div class="input_img" style="position:relative" v-on:click.self="up_load_show">

      <span v-show="add_img" v-on:click.self="up_load_show">添加图片</span>
      <img v-bind:src="input_img" v-show="!add_img" style="width:100%;height:100%;border-radius:4vw"/>
      <div class="del_x" v-on:click.self="del_x_input" v-show="!add_img">
        x
      </div>
    </div>

    <div class="warp_jies" style="margin:0 auto;box-shadow: 2px 2px 4px 2px #c3c2c2;">
      <textarea class="jies" placeholder="添加正文" style="padding:0">

    </textarea>
    </div>
    <div style="height:4vw;" ></div>

    <div class="up_load_m" v-on:click="up_load_btn">
      提交
    </div>
    <div style="height:4vw;"></div>-->
    <!-- title e -->
    <div class="wrapper_content">
      <vue-editor id="editor"
                  useCustomImageHandler
                  @imageAdded="handleImageAdded" v-model="htmlForEditor">
      </vue-editor>
    </div>
    <div style="height:2vw;width:100%;"></div>
    <div class="upload_btn" v-on:click="upload_btn">
      提交
    </div>
    <div style="height:2vw;width:100%;"></div>
  </div>

</template>
<script>
  import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
  import header from "./header_other/Header_other.vue"
  //limit_Scroll
  //import limit_scroll from "../../static/js/limit_scroll.js"
  const qs = require('qs');
  import { Toast, Indicator } from 'mint-ui';
  import { VueEditor } from 'vue2-editor'
  import common from "../common/common.js"

  //axios.post('/foo', qs.stringify({ 'bar': 123 }));

export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      add_s: true,
      record: "",
      music_url: "",
      play_data: false,
      del: false,
      pause_data:false,
      play_p: "",
      del_data: false,
      show_b_img_data: "",
      hide_show_b: true,
      add_img: true,
      content: '',
      htmlForEditor: "",
      is_app:false
    }
  },
  ...mapActions([
    "thom_redirect",
  ]),
  ...mapMutations([
     "Change_certain_layer"
  ]),
  mounted: function () {

    let is_app = common.is_app();
    if (is_app) {
      this.is_app = true;
    }

    this.$nextTick(() => {
      //图片添加
      let _this = this; // 下面的 this 是 input 指向input的
      this.$refs.file.addEventListener("change", (e) => {
        //promise s
        let count = 0;
        let result = e.srcElement.files;

        //限制张数
        if (e.srcElement.files.length > 1) {
          Toast({
            message: '图像张数不能多于1张',
            position: 'bottom',
            duration: 2000
          });
          return;
        }

        let reader = new FileReader();//读取图片
        reader.readAsDataURL(result[0]);//get img url
        let _e = e;

        //可以获取啦呵呵
        reader.onload = (e) => {
          this.show_b_img_data = e.target.result;
          this.hide_show_b = false;//显示图片
        }
      });
      this.$refs.file_zw.addEventListener("change", (e) => {
        //promise s
        let count = 0;
        let result = e.srcElement.files;

        //限制张数
        if (e.srcElement.files.length > 1) {
          Toast({
            message: '图像张数不能多于1张',
            position: 'bottom',
            duration: 2000
          });
          return;
        }

        let reader = new FileReader();//读取图片
        reader.readAsDataURL(result[0]);//get img url
        let _e = e;

        //可以获取啦呵呵
        reader.onload = (e) => {
          this.input_img = e.target.result;
          this.add_img = false;//显示图片
        }
      });

      //添加 事件检查
      document.body.addEventListener("click",  (e)=> {
        if (~e.target.className.indexOf("test_record")) {
          this.play_music();
        }
      })

      //插件 添加录音功能
      let record = document.getElementsByClassName("ql-toolbar")[0];

      var div = document.createElement("sapn");

      div.className =  "ql-formats"

      div.style.cssText = "color:red:width:10vw;height:5vw;background-color:#9f5c2f;color:#fff;line-heihgt:5vw;text-align:center;display:inline-block;font-size: 4vw; border-radius: 2vw;  width: 21vw; display: inline-block;height: 8vw; line-height: 8vw;background-color: rgb(159, 92, 47); color: rgb(255, 255, 255);  text-align: center;";
      div.innerText = "插入语音"
      div.addEventListener("click", () => {
        //this.htmlForEditor += "</div onclick='play_music' style='width: 20vw;height:10vw;border-radius:2vw;background-color:##c86161;text-align:center;line-height:10vw;color:#fff;'>录音播放</div>"

        if (this.is_app) {
            common.app_recoed();
          } else {
            this.get_voice();
          }


          //只是举个例子


      })
      record.appendChild(div);
    })
  },
  methods: {
    //upload_btn
    upload_btn: function () {
      //添加参赛者信息
      let base_url = common.get_base_url();
      ///api/user / activity / updateEnrollactive
      Indicator.open();
      let formData = new FormData();
      let file = this.$refs.file.files[0];
      let jianjie = this.$refs.jianjie.value;
      let htmlForEditor = this.$refs.htmlForEditor.value;

      formData.append("cover", file )//产赛封面
      formData.append("works", htmlForEditor )
      this.$http.post(base_url+'/yizhiweimen/api/user/activity/updateEnrollactive',
        formData
      )
      .catch((thrown) => {
          Indicator.close();
          console.log(thrown);

      }).then((e) => {
          console.log()

      })
    },
    //富文本添加tupi
    handleImageAdded: function (file, Editor, cursorLocation) {
      let base_url = common.get_base_url();
      // An example of using FormData
      // NOTE: Your key could be different such as:
      // formData.append('file', file)
      console.log("currentLocation__________________________");
      console.log(file);
      var formData = new FormData();
      formData.append('files', file);
      this.$http.post(base_url +'/yizhiweimen/api/user/activity/upload',
        formData
      )
      .catch((thrown) => {
          Indicator.close();
          console.log(thrown);
      }).then((e) => {
        console.log(e.data.fileUrl);
        console.log("img____________________");
        Editor.insertEmbed(cursorLocation, 'image', e.data.fileUrl);
      })
    },
    test_record: function () {
      alert(1111)
    },
    //提交信息
    up_load_btn: function () {
      ///api/user / activity / updateEnrollactive

    },
    del_x_input: function () {
      this.add_img = true;
      this.input_img = ""
    },
    up_load_show: function () {
      this.$refs.file_zw.click();
    },
    show_img: function () {

    },
    //header_back
    header_back: function () {
      this.$store.dispatch("thom_redirect",
        {
          name: "/activity", router: this.$router
        });
    },
    //del_x
    del_x: function () {
      this.show_b_img_data = "";
      this.hide_show_b = true;

    },
    //添加图片
    add_img_f: function () {

      this.$refs.file.click();//触发选择文件
    },
    //删除语言
    del_voice: function () {
      this.pause_data = false;//暂停去掉
      this.add_s = true;//t添加出现
      this.del_data = false//删除去掉
      this.play_data = false//播放去掉

      this.music_url = ""//把地址去掉

    },
    //暂停
    play_pause: function () {
      this.play_data = true;//播放语音
      this.pause_data = false;//停止语音
      console.log("pause))))))))))))))))")
      //暂停操作
      //mui.plusReady(function () {
      //  this.play_p.pause();
      //})

    },
    //上传语音
    up_load_voice: function () {
      let base_url = common.get_base_url();
      mui.plusReady(() => {
        var task = plus.uploader.createUpload(base_url + "/api/user/activity/upload/files",
          { method: "POST" }, function (t, status) {
            console.log(status)
            console.log("11111111111111111111111")
            //上传完成
            if (status == 200) {
              alert("Upload success: " + t.data.fileUrl);
              this.htmlForEditor += "<h1 class='test_record' style='width: 30vw; font-size:6vw;border-radius:2vw;height: 8vw; line-height: 8vw;text-align: center; color: #fff;background-color: rgba(126, 219, 19, 0.96);' data-voice=" + t.data.fileUrl + "'>语音播放</h1>"
            } else {
                alert("Upload failed: " + status);
            }
          });
        task.addFile(e, { key: "files" });
        task.start();
        //console.log("start——————————————————————————")
      })
    },
    //录音
    get_voice: function (resolve, reject) {
      this.add_s = false;
      this.play_data = true;
      this.del_data = true;//删除语言
      //record
      mui.plusReady(function () {
        let record = plus.audio.getRecorder();
        record.record({ filename: "_doc/audio/" },  (e)=> {
          console.log("success_audio__________")
          this.music_url = e
          //提交语音
          if (this.is_app) {

          }
          this.up_load_voice()
          this.play_music();


          resolve();
        }, (e)=> {
          alert("Audio record failed: " + e.message);
          reject();
        });
      })
    },
    //播放音乐
    play_music: function () {

      this.play_data = false;//播放音乐 去掉
      this.pause_data = true;//暂停
      this.del_data = true;//删除语言

      mui.plusReady(function () {

       var p = plus.audio.createPlayer(this.music_url);
       this.play_p = p;


       p.play(function () {

         this.pause_data = true;
          alert("Audio play success!");
        }, function (e) {
          alert("Audio play failed: " + e.message);
        });
      })
    }
  },
  components: {
    header,
    VueEditor
  }
}
</script>
<style>
  .test_record {
    width: 30vw;
    height: 8vw;
    line-height: 8vw;
    text-align: center;
    color: #fff;
    background-color: rgba(195, 194, 194, 0.32);
  }
</style>
<style scoped>
  .upload_btn{
    height:15vw;
    border-radius:4vw;
    font-size:8vw;
    width:40vw;
    line-height:15vw;
    background-color:#3b9e4c;
    text-align:center;
    color:#fff;
    margin:0 auto 0;
  }
  .wrapper_content {
    width: 95vw;
    border-radius: 2vw;
    background-color: #fff;
    margin: 0 auto;
    /*padding-bottom: 2vw;*/
  }

  /*input_img s*/
  .up_load_m {
    height: 10vw;
    width: 50vw;
    line-height: 10vw;
    font-size: 6vw;
    text-align: center;
    color: #fff;
    border-radius: 4vw;
    margin: 5vw auto 0;
    background-color: #3b9e4c;
  }
  .input_img {
    margin-bottom: 5vw;
    text-align: center;
    line-height: 60vw;
    color: #808080;
    font-size: 8vw;
    width: 95vw;
    height: 60vw;
    background-color: #fff;
    border-radius: 4vw;
    margin-top: 5vw;
    margin: 5vw auto 5vw;
    box-shadow: 2px 2px 4px 2px #c3c2c2;
  }
  /*input_imge*/

  /*title_s*/
  .title_s {
    width: 100%;
    height: 4vw;
    line-height: 4vw;
    font-size: 6vw;
    color: #e68a4c;
    text-align: center;
    margin-top: 6vw;
    margin-bottom: 4vw;
    text-shadow: 0px 3px 5px rgba(84, 83, 83, 0.59);
  }
  /*title_s*/
  /*img_show_b s*/
  .warp_jies {
    margin: 0 auto 5.3vw;
    width: 85vw;
    height: 27.4vw;
    border-radius: 4vw;
    box-shadow: 4px 4px 6px 4px #c3c2c2;
  }
  .del_x {
    position: absolute;
    top: 6vw;
    left: 6vw;
    width: 8vw;
    height: 8vw;
    text-align: center;
    line-height: 7vw;
    color: #fff;
    background-color: #ff0000;
    border-radius: 50%;
    font-size: 7vw;
    font-weight: 600;
    box-shadow: 0px 2px 2px 2px rgba(33, 33, 33, 0.45);
  }
  .up_Load_img {
    position: relative;
    overflow:hidden;
  }
  .img_show_b {
    width: 100%;
    height: 100%;
    display: block;
  }
  /*img_show_be */
  .add_voice {
    width: 40vw;
    height: 10vw;
    line-height: 10vw;
    color: #fff;
    background-color: #2aa1a5;
    border-radius: 4vw;
    margin: 8vw auto 0;
    box-shadow: 0px 2px 4px 6px rgba(195, 194, 194, 0.32);
  }
  .title {
    width: 95vw;
    height: 30vw;
    margin: 0 auto 0;
    /*margin-top:7.4vw;*/
    background-color: #fff;
    box-shadow: 2px 2px 4px 2px #c3c2c2;
    border-radius: 4vw;
  }
  .jies {
    border:0;
    resize: none;
    background-color: #fff;
    border-radius: 4vw;
    width:100%;
    height:100%;

  }
  .up_Load_header {
    /*position: relative;*/
    position:fixed;
    top:0;
    width:100%;
    z-index:100;
    padding-top:5.3vw;
  }
  .gobakc_img {
    width:6vw;
    position: absolute;
    left:3.2vw;
    top:66%;
    transform:translateY(-50%);
  }
  .up_Load_header {
    height: 11.7vw;
    line-height: 11.7vw;
    width: 100%;
    background-color: #9f5c2f;
    text-align: center;
    font-size: 4.6vw;
    letter-spacing: 1px;
    color: #fff;
  }
  .up_Load_img {
    background-color: #fff;
    width: 95.7vw;
    height: 82.5vw;
    border-radius: 4vw;
    box-shadow: 2px 2px 4px 2px #c3c2c2;
    margin: 9vw auto 3vw;
  }
  .up_load_act_wrapper {
    padding-top: 11.7vw;
    height: auto;
    width: 100%;
    background-color: #eeeeee;
    box-shadow: 2px 2px 4px 2px #c3c2c2;
  }
  .mid_box_w {
    color: #949494;
    font-size:4.5vw;
    line-height: 2;
    text-align:center;
    width:60vw;
    /*margin:3.6vw auto 0;*/
    padding-top:32vw;
    margin:0 auto;
  }
  #app{
    margin-top:0;
  }
</style>
